<template>
  <div
    class="common-banner"
    :class="{
      'is-warning': state === 'warning',
      'is-danger': state === 'danger',
      'is-success': state === 'success',
      'is-special': state === 'special',
      'is-full': isFull
    }"
  >
    <slot name="icon">
      <el-icon
        v-if="['warning', 'special'].includes(state)"
        class="text-[#FF6805]"
        size="16"
      >
        <warning-filled />
      </el-icon>
    </slot>
    <slot>
      <span>{{ content }}</span>
    </slot>
    <el-button
      v-if="showButton"
      text
      type="primary"
      class="p-0 bg-transparent hover:opacity-50"
      @click="toSet"
    >
      前往配置
      <el-icon class="el-icon--right" color="#164cff" size="15"
        ><arrow-right
      /></el-icon>
    </el-button>
  </div>
</template>

<script lang="ts" setup>
import { ArrowRight, WarningFilled } from '@element-plus/icons-vue'

type State = 'warning' | 'danger' | 'success' | 'default' | 'special'

interface IProps {
  content?: string
  showButton?: boolean
  state?: State
  isFull?: boolean
}

withDefaults(defineProps<IProps>(), {
  content:
    'DNS接口未配置，需配置后才能使用才能使用申请证书自动验证和证书自动续期功能。',
  showButton: false,
  state: 'default',
  isFull: false
})

const router = useRouter()
const toSet = () => {
  router.push({ name: 'Personal', params: { type: 'dnsConfig' } })
}
</script>
<style lang="scss" scoped>
.common-banner {
  @apply flex items-center gap-x-2  pl-[6px] py-[10px] bg-[#fef2e6] text-[#454954] text-xs rounded;
  &.is-full {
    border: 1px solid rgba(255, 204, 153, 1);
    @apply pl-4 h-10 text-sm;
  }
  &.is-warning {
    @apply bg-[#FEF2E6] text-[#FF6805];
  }
  &.is-danger {
    @apply bg-[##FFECE8] text-[#F53F3F];
  }
  &.is-success {
    @apply bg-[#E5F7E9] text-[#E5F7E9];
  }
}
</style>
